<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="icon" href="/image/favicon.ico"> -->
    <title>企业名录</title>
    <link rel="stylesheet" href="./index.css">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>

    <div id="app" class="container">
        <header>
            <img src="image/global.svg" alt="Logo" class="logo">
            <h1>信息查询CRUD页面</h1>
        </header>
        <div class="carousel">
            <img :src="currentImage" alt="Banner" />
            <div class="controls">
                <button class="bt1" @click="changeImage(-1)"><img src="image/上一页.png" alt=""></button>
                <button class="bt2" @click="changeImage(1)"><img src="image/下一页.png" alt=""></button>
            </div>
            <div class="indicators">
                <span v-for="(indicator, index) in indicators" :key="index" class="indicator"
                    :class="{ active: currentIndex === index }" @click="currentIndex = index"></span>
            </div>
        </div>
        <div class="slogan">
            <div>
                <img src="https://www.ruiyanshijie.com/images/slogan-ico.jpg" alt="Slogan">
                <p>全国全行业客户资源</p>
            </div>
            <div>
                <img src="https://www.ruiyanshijie.com/images/slogan-ico-03.jpg" alt="Slogan">
                <p>按标签智能推荐高匹配客户</p>
            </div>
            <div>
                <img src="https://www.ruiyanshijie.com/images/slogan-ico-02.jpg" alt="Slogan">
                <p>海量资源每日更新</p>
            </div>
        </div>
        <div>
            <input class="search-input" type="text" placeholder="搜索企业名称" v-model="searchQuery">
            <button class="search-button" @click="search">搜索</button>
        </div>
        <div class="add">
            <button class="add-button" @click="addNewInfo">添加信息</button>
            <button class="refresh-button" @click="refreshTable">刷新</button>
        </div>
        <div class="table-container">

            <el-table :data="filteredInfoList" border style="width: 100%">
                <!-- 企业名称 -->
                <el-table-column prop="company_name" label="企业名称" align="center"
                    show-overflow-tooltip></el-table-column>

                <!-- 统一社会信用代码 -->
                <el-table-column prop="unified_social_credit_code" label="统一社会信用代码" align="center"
                    show-overflow-tooltip></el-table-column>

                <!-- 企业类型 -->
                <el-table-column prop="company_type" label="企业类型" align="center"
                    show-overflow-tooltip></el-table-column>

                <!-- 经营状态 -->
                <el-table-column prop="operating_status" label="经营状态" align="center"
                    show-overflow-tooltip></el-table-column>

                <!-- 法定代表人 -->
                <el-table-column prop="legal_representative" label="法定代表人" align="center"
                    show-overflow-tooltip></el-table-column>
                <!-- 成立日期 -->
                <el-table-column prop="establishment_date" label="成立日期" align="center"
                    show-overflow-tooltip></el-table-column>

                <!-- 操作 -->
                <el-table-column label="操作" align="center" width="250px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editInfo(scope.row)">修改</el-button>
                        <el-button type="success" size="mini" type="primary"
                            @click="openDetailModal(scope.row)">查看详情</el-button>
                        <el-button type="danger" size="mini" type="danger"
                            @click="deleteInfo(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加信息对话框 -->
        <template>
            <el-dialog title="添加企业信息" :visible.sync="showAddModal" width="50%" @close="handleAddClose">
                <el-form ref="addForm" :model="newInfo" label-width="150px">
                    <el-form-item label="企业名称:">
                        <el-input v-model="newInfo.company_name"></el-input>
                    </el-form-item>
                    <el-form-item label="英文名称:">
                        <el-input v-model="newInfo.english_name"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码:">
                        <el-input v-model="newInfo.unified_social_credit_code"></el-input>
                    </el-form-item>
                    <el-form-item label="企业类型:">
                        <el-input v-model="newInfo.company_type"></el-input>
                    </el-form-item>
                    <el-form-item label="经营状态:">
                        <el-input v-model="newInfo.operating_status"></el-input>
                    </el-form-item>
                    <el-form-item label="成立日期:">
                        <el-input v-model="newInfo.establishment_date"></el-input>
                    </el-form-item>
                    <el-form-item label="核准日期:">
                        <el-input v-model="newInfo.approval_date"></el-input>
                    </el-form-item>
                    <el-form-item label="法定代表人:">
                        <el-input v-model="newInfo.legal_representative"></el-input>
                    </el-form-item>
                    <el-form-item label="注册资本:">
                        <el-input v-model="newInfo.registered_capital"></el-input>
                    </el-form-item>
                    <el-form-item label="实缴资本:">
                        <el-input v-model="newInfo.paid_in_capital"></el-input>
                    </el-form-item>
                    <el-form-item label="参保人数:">
                        <el-input v-model="newInfo.insured_persons"></el-input>
                    </el-form-item>
                    <el-form-item label="公司规模:">
                        <el-input v-model="newInfo.company_scale"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围:">
                        <el-input v-model="newInfo.business_scope"></el-input>
                    </el-form-item>
                    <el-form-item label="注册地址:">
                        <el-input v-model="newInfo.registered_address"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限:">
                        <el-input v-model="newInfo.business_term"></el-input>
                    </el-form-item>
                    <el-form-item label="纳税人识别号:">
                        <el-input v-model="newInfo.taxpayer_identification_number"></el-input>
                    </el-form-item>
                    <el-form-item label="工商注册号:">
                        <el-input v-model="newInfo.business_registration_number"></el-input>
                    </el-form-item>
                    <el-form-item label="组织机构代码:">
                        <el-input v-model="newInfo.organization_code"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:">
                        <el-input v-model="newInfo.contact_number"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱:">
                        <el-input v-model="newInfo.email"></el-input>
                    </el-form-item>
                    <el-form-item label="纳税人资质:">
                        <el-input v-model="newInfo.taxpayer_qualification"></el-input>
                    </el-form-item>
                    <el-form-item label="曾用名:">
                        <el-input v-model="newInfo.former_name"></el-input>
                    </el-form-item>
                    <el-form-item label="所属省份:">
                        <el-input v-model="newInfo.province"></el-input>
                    </el-form-item>
                    <el-form-item label="所属城市:">
                        <el-input v-model="newInfo.city"></el-input>
                    </el-form-item>
                    <el-form-item label="所属区县:">
                        <el-input v-model="newInfo.district"></el-input>
                    </el-form-item>
                    <el-form-item label="网站链接:">
                        <el-input v-model="newInfo.website_link"></el-input>
                    </el-form-item>
                    <el-form-item label="所属行业:">
                        <el-input v-model="newInfo.industry"></el-input>
                    </el-form-item>
                    <el-form-item label="一级行业分类:">
                        <el-input v-model="newInfo.first_level_industry_classification"></el-input>
                    </el-form-item>
                    <el-form-item label="二级行业分类:">
                        <el-input v-model="newInfo.second_level_industry_classification"></el-input>
                    </el-form-item>
                    <el-form-item label="三级行业分类:">
                        <el-input v-model="newInfo.third_level_industry_classification"></el-input>
                    </el-form-item>
                    <el-form-item label="登记机关:">
                        <el-input v-model="newInfo.registration_authority"></el-input>
                    </el-form-item>
                    <el-form-item label="经度:">
                        <el-input v-model="newInfo.longitude"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度:">
                        <el-input v-model="newInfo.latitude"></el-input>
                    </el-form-item>
                    <el-form-item label="AI:">
                        <el-input v-model="newInfo.ai"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleAddClose">取 消</el-button>
                    <el-button type="primary" @click="addInfo">提 交</el-button>
                </span>
            </el-dialog>
        </template>
        <!-- 更新信息对话框 -->
        <template>
            <el-dialog title="更新企业信息" :visible.sync="showUpdateModal" width="50%" @close="handleUpdateClose">
                <el-form ref="updateForm" :model="currentInfo" label-width="150px">
                    <el-form-item label="企业名称:">
                        <el-input v-model="newInfo.company_name"></el-input>
                    </el-form-item>
                    <el-form-item label="英文名称:">
                        <el-input v-model="newInfo.english_name"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码:">
                        <el-input v-model="newInfo.unified_social_credit_code"></el-input>
                    </el-form-item>
                    <el-form-item label="企业类型:">
                        <el-input v-model="newInfo.company_type"></el-input>
                    </el-form-item>
                    <el-form-item label="经营状态:">
                        <el-input v-model="newInfo.operating_status"></el-input>
                    </el-form-item>
                    <el-form-item label="成立日期:">
                        <el-input v-model="newInfo.establishment_date"></el-input>
                    </el-form-item>
                    <el-form-item label="核准日期:">
                        <el-input v-model="newInfo.approval_date"></el-input>
                    </el-form-item>
                    <el-form-item label="法定代表人:">
                        <el-input v-model="newInfo.legal_representative"></el-input>
                    </el-form-item>
                    <el-form-item label="注册资本:">
                        <el-input v-model="newInfo.registered_capital"></el-input>
                    </el-form-item>
                    <el-form-item label="实缴资本:">
                        <el-input v-model="newInfo.paid_in_capital"></el-input>
                    </el-form-item>
                    <el-form-item label="参保人数:">
                        <el-input v-model="newInfo.insured_persons"></el-input>
                    </el-form-item>
                    <el-form-item label="公司规模:">
                        <el-input v-model="newInfo.company_scale"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围:">
                        <el-input v-model="newInfo.business_scope"></el-input>
                    </el-form-item>
                    <el-form-item label="注册地址:">
                        <el-input v-model="newInfo.registered_address"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限:">
                        <el-input v-model="newInfo.business_term"></el-input>
                    </el-form-item>
                    <el-form-item label="纳税人识别号:">
                        <el-input v-model="newInfo.taxpayer_identification_number"></el-input>
                    </el-form-item>
                    <el-form-item label="工商注册号:">
                        <el-input v-model="newInfo.business_registration_number"></el-input>
                    </el-form-item>
                    <el-form-item label="组织机构代码:">
                        <el-input v-model="newInfo.organization_code"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:">
                        <el-input v-model="newInfo.contact_number"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱:">
                        <el-input v-model="newInfo.email"></el-input>
                    </el-form-item>
                    <el-form-item label="纳税人资质:">
                        <el-input v-model="newInfo.taxpayer_qualification"></el-input>
                    </el-form-item>
                    <el-form-item label="曾用名:">
                        <el-input v-model="newInfo.former_name"></el-input>
                    </el-form-item>
                    <el-form-item label="所属省份:">
                        <el-input v-model="newInfo.province"></el-input>
                    </el-form-item>
                    <el-form-item label="所属城市:">
                        <el-input v-model="newInfo.city"></el-input>
                    </el-form-item>
                    <el-form-item label="所属区县:">
                        <el-input v-model="newInfo.district"></el-input>
                    </el-form-item>
                    <el-form-item label="网站链接:">
                        <el-input v-model="newInfo.website_link"></el-input>
                    </el-form-item>
                    <el-form-item label="所属行业:">
                        <el-input v-model="newInfo.industry"></el-input>
                    </el-form-item>
                    <el-form-item label="一级行业分类:">
                        <el-input v-model="newInfo.first_level_industry_classification"></el-input>
                    </el-form-item>
                    <el-form-item label="二级行业分类:">
                        <el-input v-model="newInfo.second_level_industry_classification"></el-input>
                    </el-form-item>
                    <el-form-item label="三级行业分类:">
                        <el-input v-model="newInfo.third_level_industry_classification"></el-input>
                    </el-form-item>
                    <el-form-item label="登记机关:">
                        <el-input v-model="newInfo.registration_authority"></el-input>
                    </el-form-item>
                    <el-form-item label="经度:">
                        <el-input v-model="newInfo.longitude"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度:">
                        <el-input v-model="newInfo.latitude"></el-input>
                    </el-form-item>
                    <el-form-item label="AI:">
                        <el-input v-model="newInfo.ai"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleUpdateClose">取 消</el-button>
                    <el-button type="primary" @click="updateInfo">提 交</el-button>
                </span>
            </el-dialog>
        </template>
        <!-- 查看详细信息对话框 -->
        <el-dialog :visible.sync="isDetailModalVisible" width="80%" title="企业详细信息" class="custom-dialog">
            <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        企业名称
                    </template>
                    {{ detailInfo.company_name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        英文名称
                    </template>
                    {{ detailInfo.english_name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        统一社会信用代码
                    </template>
                    {{ detailInfo.unified_social_credit_code }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        企业类型
                    </template>
                    {{ detailInfo.company_type }}
                </el-descriptions-item>
                <!-- ' 经营状态 ': operating_status -->
                <el-descriptions-item>
                    <template slot="label">
                        经营状态
                    </template>
                    {{ detailInfo.operating_status }}
                </el-descriptions-item>
                <!-- ' 成立日期 ': establishment_date -->
                <el-descriptions-item>
                    <template slot="label">
                        成立日期
                    </template>
                    {{ detailInfo.establishment_date }}
                </el-descriptions-item>
                <!-- ' 核准日期 ': approval_date -->
                <el-descriptions-item>
                    <template slot="label">
                        核准日期
                    </template>
                    {{ detailInfo.approval_date }}
                </el-descriptions-item>
                <!-- ' 法定代表人 ': legal_representative -->
                <el-descriptions-item>
                    <template slot="label">
                        法定代表人
                    </template>
                    {{ detailInfo.legal_representative }}
                </el-descriptions-item>
                <!-- ' 注册资本 ': registered_capital -->
                <el-descriptions-item>
                    <template slot="label">
                        注册资本
                    </template>
                    {{ detailInfo.registered_capital }}
                </el-descriptions-item>
                <!-- ' 实缴资本 ': paid_in_capital -->
                <el-descriptions-item>
                    <template slot="label">
                        实缴资本
                    </template>
                    {{ detailInfo.paid_in_capital }}
                </el-descriptions-item>
                <!-- ' 参保人数 ': insured_persons -->
                <el-descriptions-item>
                    <template slot="label">
                        参保人数
                    </template>
                    {{ detailInfo.insured_persons }}
                </el-descriptions-item>
                <!-- ' 公司规模 ': company_scale -->
                <el-descriptions-item>
                    <template slot="label">
                        公司规模
                    </template>
                    {{ detailInfo.company_scale }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        注册地址
                    </template>
                    {{ detailInfo.registered_address }}
                </el-descriptions-item>
                <!-- ' 营业期限 ': business_term -->
                <el-descriptions-item>
                    <template slot="label">
                        营业期限
                    </template>
                    {{ detailInfo.business_term }}
                </el-descriptions-item>
                <!-- ' 纳税人识别号 ': taxpayer_identification_number -->
                <el-descriptions-item>
                    <template slot="label">
                        纳税人识别号
                    </template>
                    {{ detailInfo.taxpayer_identification_number }}
                </el-descriptions-item>
                <!-- ' 工商注册号 ': business_registration_number -->
                <el-descriptions-item>
                    <template slot="label">
                        工商注册号
                    </template>
                    {{ detailInfo.business_registration_number }}

                </el-descriptions-item>
                <!-- ' 组织机构代码 ': organization_code -->
                <el-descriptions-item>
                    <template slot="label">
                        组织机构代码
                    </template>
                    {{ detailInfo.organization_code }}
                </el-descriptions-item>
                <!-- ' 联系电话 ': contact_number -->
                <el-descriptions-item>
                    <template slot="label">
                        联系电话
                    </template>
                    {{ detailInfo.contact_number }}
                </el-descriptions-item>
                <!-- ' 邮箱 ': email -->
                <el-descriptions-item>
                    <template slot="label">
                        邮箱
                    </template>
                    {{ detailInfo.email }}
                </el-descriptions-item>
                <!-- ' 纳税人资质 ': taxpayer_qualification -->
                <el-descriptions-item>
                    <template slot="label">
                        纳税人资质
                    </template>
                    {{ detailInfo.taxpayer_qualification }}
                </el-descriptions-item>
                <!-- ' 曾用名 ': former_name -->
                <el-descriptions-item>
                    <template slot="label">
                        曾用名
                    </template>
                    {{ detailInfo.former_name }}
                </el-descriptions-item>
                <!-- ' 所属省份 ': province -->
                <el-descriptions-item>
                    <template slot="label">
                        所属省份
                    </template>
                    {{ detailInfo.province }}
                </el-descriptions-item>
                <!-- ' 所属城市 ': city -->
                <el-descriptions-item>
                    <template slot="label">
                        所属城市
                    </template>
                    {{ detailInfo.city }}
                </el-descriptions-item>
                <!-- ' 所属区县 ': district -->
                <el-descriptions-item>
                    <template slot="label">
                        所属区县
                    </template>
                    {{ detailInfo.district }}
                </el-descriptions-item>
                <!-- ' 网站链接 ': website_link -->
                <el-descriptions-item>
                    <template slot="label">
                        网站链接
                    </template>
                    {{ detailInfo.website_link }}
                </el-descriptions-item>
                <!-- ' 所属行业 ': industry -->
                <el-descriptions-item>
                    <template slot="label">
                        所属行业
                    </template>
                    {{ detailInfo.industry }}
                </el-descriptions-item>
                <!-- ' 一级行业分类 ': first_level_industry_classification -->
                <el-descriptions-item>
                    <template slot="label">
                        一级行业分类
                    </template>
                    {{ detailInfo.first_level_industry_classification }}
                </el-descriptions-item>
                <!-- ' 二级行业分类 ': second_level_industry_classification -->
                <el-descriptions-item>
                    <template slot="label">
                        二级行业分类
                    </template>
                    {{ detailInfo.second_level_industry_classification }}
                </el-descriptions-item>
                <!-- ' 三级行业分类 ': third_level_industry_classification -->
                <el-descriptions-item>
                    <template slot="label">
                        三级行业分类
                    </template>
                    {{ detailInfo.third_level_industry_classification }}
                </el-descriptions-item>
                <!-- ' 登记机关 ': registration_authority -->
                <el-descriptions-item>
                    <template slot="label">
                        登记机关
                    </template>
                    {{ detailInfo.registration_authority }}
                </el-descriptions-item>
                <!-- ' 经度 ': longitude -->
                <el-descriptions-item>
                    <template slot="label">
                        经度
                    </template>
                    {{ detailInfo.longitude }}
                </el-descriptions-item>
                <!-- ' 纬度 ': latitude -->
                <el-descriptions-item>
                    <template slot="label">
                        纬度
                    </template>
                    {{ detailInfo.latitude }}
                </el-descriptions-item>
                <!-- 'ai': ai_result把这个写到里面 -->
                <el-descriptions-item>
                    <template slot="label">
                        ai
                    </template>
                    <!-- {{ detailInfo.ai_result }} -->
                    {{ detailInfo.ai }}
                </el-descriptions-item>
                <!-- ' 经营范围 ': business_scope -->
                <el-descriptions-item>
                    <template slot="label">
                        经营范围
                    </template>
                    {{ detailInfo.business_scope }}
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="closeDetailModal" class="close-button">关闭</el-button>
            </span>
        </el-dialog>

        <footer class="site-footer">
            <ul class="social-media">
                <li><a href="#">关于我们</a><img src="image/我的-关于我们.png" alt=""></li>
                <li><a href="#">在线服务</a><img src="image/在线服务.png" alt=""></li>
                <li><a href="#">公众号</a><img src="image/公众号.png" alt=""></li>
            </ul>
            <p class="copyright">版权所有 © 2024 菠萝头菠萝菠萝科技责任有限公司. 保留所有权利。</p>
            <p class="contact-info">联系我们: 2785538062@qq.com | 电话: +123456789</p>
        </footer>

    </div>
</body>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                images: [
                    'image/pto_1.jpg',
                    'image/pto_2.jpg',
                    'image/pto_3.png',
                    'image/pto_4.jpg',
                    'image/pto_5.png',
                    'image/pto_6.jpg',
                ],
                currentIndex: 0, // 修正拼写错误
                intervalId: null,
                over: false,
                searchQuery: '',
                searchResults: [],
                isUpdate: false,
                message: '',
                infoList: [],
                addingNew: false,
                showModal: false,
                isDetailModalVisible: false,
                currentInfo: null,
                detailInfo: {},
                newInfo: this.initializeNewInfo(),
                dialogVisible: false,
                showAddModal: false,
                showUpdateModal: false
            }
        },

        mounted() {
            this.fetchInfo();
            this.startAutoPlay();
        },
        beforeDestroy() {
            this.stopAutoPlay();
        },
        computed: {
            dialogTitle() {
                return this.isUpdate ? '更新信息' : '添加信息';
            },
            // 使用计算属性来过滤信息列表
            filteredInfoList() {
                return this.infoList;
            },
            currentImage() {
                return this.images[this.currentIndex]; // 修正拼写错误
            },
            indicators() {
                return Array(this.images.length).fill(null);
            }
        },
        methods: {
            openDialog(isUpdate, info) {
                this.isUpdate = isUpdate;
                if (isUpdate) {
                    this.newInfo = { ...info };
                } else {
                    this.newInfo = this.initializeNewInfo();
                }
                this.showModal = true;
            },
            handleClose() {
                this.showModal = false;
            },
            initializeNewInfo() {
                return {
                    company_name: '',
                    english_name: '',
                    unified_social_credit_code: '',
                    company_type: '',
                    operating_status: '',
                    establishment_date: '',
                    approval_date: '',
                    legal_representative: '',
                    registered_capital: '',
                    paid_in_capital: '',
                    insured_persons: '',
                    company_scale: '',
                    business_scope: '',
                    registered_address: '',
                    business_term: '',
                    taxpayer_identification_number: '',
                    business_registration_number: '',
                    organization_code: '',
                    contact_number: '',
                    email: '',
                    taxpayer_qualification: '',
                    former_name: '',
                    province: '',
                    city: '',
                    district: '',
                    website_link: '',
                    industry: '',
                    first_level_industry_classification: '',
                    second_level_industry_classification: '',
                    third_level_industry_classification: '',
                    registration_authority: '',
                    longitude: '',
                    latitude: '',
                    ai: '',
                };
            },
            startAutoPlay() {
                this.intervalId = setInterval(() => {
                    this.changeImage(1);
                }, 10000);
            },
            stopAutoPlay() {
                clearInterval(this.intervalId);
            },
            changeImage(direction) {
                this.currentIndex = (this.currentIndex + direction + this.images.length) % this.images.length; // 修正拼写错误
            },
            async fetchInfo() {
                try {
                    const response = await axios.get('http://127.0.0.1:5000/info');
                    this.infoList = response.data;
                } catch (error) {
                    console.error('获取信息失败:', error);
                    alert('获取信息失败，请重试。');
                }
            },
            // 添加新记录的方法

            async addInfo() {
                try {
                    console.log('添加数据信息', this.newInfo); // 打印请求体

                    await axios.post('http://127.0.0.1:5000/info/add', this.newInfo, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });

                    alert('你的信息已添加成功！');
                    this.fetchInfo(); // 刷新列表
                    this.handleAddClose();
                } catch (error) {
                    let errorMessage = '添加失败，请重试。';
                    if (error.response && error.response.data && error.response.data.error) {
                        errorMessage = error.response.data.error;
                    }
                    console.error('添加失败:', error.response ? error.response.data : error);
                    alert(errorMessage);
                }
            },

            async updateInfo() {
                try {
                    if (!this.currentInfo) {
                        alert('没有选择要更新的记录。');
                        return;
                    }
                    // await axios.put(`http://127.0.0.1:5000/info/${this.currentInfo.id}`, this.currentInfo);
                    await axios.put(`http://127.0.0.1:5000/info/${this.currentInfo.id}`, this.newInfo);
                    this.currentInfo = null; // 清除当前编辑的信息
                    alert('你的信息已更新成功！');
                    this.fetchInfo(); // 刷新列表
                    this.handleUpdateClose();
                } catch (error) {
                    let errorMessage = '更新失败，请重试。';
                    if (error.response && error.response.data && error.response.data.error) {
                        errorMessage = error.response.data.error;
                    }
                    console.error('更新失败:', error.response ? error.response.data : error);
                    alert(errorMessage);
                }
            },

            handleAddClose() {
                this.showAddModal = false;
                this.newInfo = { ...this.defaultInfo }; // 重置表单
            },

            handleUpdateClose() {
                this.showUpdateModal = false;
                this.currentInfo = null; // 重置表单
            },

            openAddModal() {
                this.showAddModal = true;
            },

            openUpdateModal(info) {
                this.currentInfo = { ...info };
                this.showUpdateModal = true;
            },


            async search() { // 搜索方法
                try {
                    const response = await axios.get('http://127.0.0.1:5000/info/search', {
                        params: {
                            query: this.searchQuery
                        }
                    });
                    this.infoList = response.data; // 更新信息列表
                } catch (error) {
                    alert('请输入有效的企业名称关键字查询内容')

                }
            },
            refreshTable() {
                this.fetchInfo();
                this.searchQuery = '';
            },
            addNewInfo() {
                this.showAddModal = true;
                this.newInfo = this.initializeNewInfo();
            },
            // 编辑信息的方法
            editInfo(info) {
                this.currentInfo = info;
                this.newInfo = {
                    company_name: info.company_name,
                    english_name: info.english_name,
                    unified_social_credit_code: info.unified_social_credit_code,
                    company_type: info.company_type,
                    operating_status: info.operating_status,
                    establishment_date: info.establishment_date,
                    approval_date: info.approval_date,
                    legal_representative: info.legal_representative,
                    registered_capital: info.registered_capital,
                    paid_in_capital: info.paid_in_capital,
                    insured_persons: info.insured_persons,
                    company_scale: info.company_scale,
                    business_scope: info.business_scope,
                    registered_address: info.registered_address,
                    business_term: info.business_term,
                    taxpayer_identification_number: info.taxpayer_identification_number,
                    business_registration_number: info.business_registration_number,
                    organization_code: info.organization_code,
                    contact_number: info.contact_number,
                    email: info.email,
                    taxpayer_qualification: info.taxpayer_qualification,
                    former_name: info.former_name,
                    province: info.province,
                    city: info.city,
                    district: info.district,
                    website_link: info.website_link,
                    industry: info.industry,
                    first_level_industry_classification: info.first_level_industry_classification,
                    second_level_industry_classification: info.second_level_industry_classification,
                    third_level_industry_classification: info.third_level_industry_classification,
                    registration_authority: info.registration_authority,
                    longitude: info.longitude,
                    latitude: info.latitude,
                    ai: info.ai,
                };
                this.showUpdateModal = true;
            },
            openDetailModal(info) {
                this.detailInfo = info;
                this.isDetailModalVisible = true;
            },
            async deleteInfo(id) {
                if (confirm('确定删除此记录吗？')) {
                    try {
                        const response = await axios.delete(`http://127.0.0.1:5000/info/${id}`);
                        if (response.status === 200) {
                            this.fetchInfo(); // 刷新列表
                        } else {
                            throw new Error('服务器返回错误');
                        }
                    } catch (error) {
                        console.error('删除信息失败:', error);
                        alert('删除信息失败，请重试。');
                    }
                }
            },
            closeModal() {
                this.showModal = false;
                this.newInfo = this.initializeNewInfo();
            },
            closeDetailModal() {
                this.isDetailModalVisible = false; // 更新为新的名称
            },

        }
    })
</script>


</html>